<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<script type='text/javascript'>
JShark.ui.Register("ui/ui-input.jsp");
JShark.ui.Include("ui/ui-icon.jsp");
</script>

<style type="text/css">
.uiInput {
	height: 30px;
	font-size: 1.2em;
}

.uiInputS {
	width: 65px;
}

.uiInputN {
	width: 200px;
}

.uiInputL {
	width: 350px;
}
</style>

<script id='tmpl_ui_input' type='text/html'>
<div style='display: block; width: auto; padding: 2px 5px' class='uiInput' _id='uiInput'>
	<div>
		<span _id='input2'></span>
	</div>
	<div style='display: table; width: 100%;'>
		<div style='display: table-cell; vertical-align: middle; height: 32px;'>
			<input _id='input' type='text' style='width: 100%; background: transparent; border: 0px; padding: 0px;'/>
		</div>
		<div style='display: table-cell; width: 32px; vertical-align: middle;'>
			<div style='display: inline-block; width: 32px; height: 32px;' _id='icon' class='Icon32'></div>
		</div>
	</div>
</div>
</script>

<script id='tmpl_ui_input_textarea' type='text/html'>
<div style='display: block; width: auto; padding: 2px 5px' class='uiInput' _selector='uiInput'>
	<div id='wrapper' style='display: table; width: 100%;'>
		<div style='display: table-cell; vertical-align: middle; height: 32px;'>
			<textarea _selector='input' name='' style='width: 100%; background: transparent; border: 0px; padding: 0px;'></textarea>
		</div>
		<div style='display: table-cell; width: 32px; vertical-align: middle;'>
			<div style='display: inline-block; width: 32px; height: 32px;' _selector='icon' class='Icon32'></div>
		</div>
	</div>
</div>
</script>

<script type='text/javascript'>
cp01.ui.UIInput = function (p_dom, p_events, p_attributes) {
	var _Dom = p_dom;

	var _Events = 
		{ "onPressEnter" 	: null
		, "onPressAnyKey"	: null
		, "onFocus"			: null
		, "onBlur"			: null
		}
	;
	for ( var label in p_events ){
		_Events[label] = p_events[label];
	}

	var _Attributes = 
		{ "placeholder" : ""
		, "name"		: ""
		, "value"		: ""
		, "icon"		: ""
		, "type"		: ""
		, "maxlength" 	: ""
		}
	;
	_Attributes = JShark.Parser.DomAttributesToHashObject(_Dom, _Attributes);
	for ( var label in p_attributes ){
		_Attributes[label] = p_attributes[label];
	}

	var _Input;
	var _Icon;
	function _Inflate(p_tmplId, p_data) {
		var tmpl = new JShark.dom.Template(p_tmplId);
		_Input = tmpl.Get("input");
		_Icon  = tmpl.Get("icon");

		_Input.value = "hola";
		_Input.onfocus = function (){
			JShark.Out.Log( "focus", this );
		}

		_Dom.appendChild( tmpl.Dom() );
	}

	_Inflate("tmpl_ui_input");

}
</script>


